<!-- inline styles related to this page -->
<link rel="stylesheet" href="styles/money/shaixuan.css" />

<!-- begin 支出 -->
<div class="form-btn">
	<button class="btn-add"><i class="ace-icon fa fa-plus"></i>新增支出</button>
	<span class="input-icon input-icon-right">
		<input type="text" placeholder="出入商品ID/条码/名称/备注" />
		<i class="ace-icon fa fa-search"></i>
	</span>
	<button class="btn-filter">
		<img src="images/money/xuan.png"/>
		<span>筛选</span>
	</button>
	<button class="btn-sort">
		<img src="images/money/lll.png"/>
	</button>
</div>
<div class="table-filter">
	<p>
		<a href="#">类型:</a>
		<a href="#">全部</a>
		<a href="#">店铺租金</a>
		<a href="#">货运费用</a>
		<a href="#">人工费用</a>
	</p>
	<p>
		<a href="#">时间:</a>
		<a href="#">全部</a>
		<a href="#">
			<input class="form-control date-picker" id="id-date-picker-1" type="text" data-date-format="dd-mm-yyyy" value="2017年01月03日">一
			<input class="form-control date-picker" id="id-date-picker-1" type="text" data-date-format="dd-mm-yyyy" value="年/月/日">
		</a>
		<a href="#" class="i-btn">
			<span class="buttonss">收回<i class="fa fa-chevron-up up-up" aria-hidden="true"></i></span>
		</a>
	</p>
</div>
<div class="zhichu">
	<table class="table simple-table">
		<thead>
			<tr>
				<th class="center">
					<label class="pos-rel">
						<input type="checkbox" class="ace" />
						<span class="lbl"></span>
					</label>
				</th>
				<th class="center">
					<i class="ace-icon fa fa-trash-o"></i>
				</th>
				<th>单据号</th>
				<th>支出时间</th>
				<th>账单类型</th>
				<th>金额</th>
				<th>经办人</th>
				<th>备注</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td class="center">
					<label class="pos-rel">
						<input type="checkbox" class="ace" />
						<span class="lbl"></span>
					</label>
				</td>
				<td class="center">
					<i class="ace-icon fa fa-trash-o"></i>
				</td>
				<td>Z-201611229999</td>
				<td>2016-11-11 22:00:00</td>
				<td>店铺租金</td>
				<td>8888.88</td>
				<td>店员名称</td>
				<td>XXXXXXXXXXXXXXXXXX</td>
				<td>
					<i class="ace-icon fa fa-pencil-square-o"></i>
				</td>
			</tr>
			<tr>
				<td class="center">
					<label class="pos-rel">
						<input type="checkbox" class="ace" />
						<span class="lbl"></span>
					</label>
				</td>
				<td class="center">
					<i class="ace-icon fa fa-trash-o"></i>
				</td>
				<td>Z-201611229999</td>
				<td>2016-11-11 22:00:00</td>
				<td>人工费用</td>
				<td>8888.88</td>
				<td>张三</td>
				<td>XXXXXXXXXXXXXXXXXX</td>
				<td>
					<i class="ace-icon fa fa-pencil-square-o"></i>
				</td>
			</tr>
			<tr>
				<td class="center">
					<label class="pos-rel">
						<input type="checkbox" class="ace" />
						<span class="lbl"></span>
					</label>
				</td>
				<td class="center">
					<i class="ace-icon fa fa-trash-o"></i>
				</td>
				<td>Z-201611229999</td>
				<td>2016-11-11 22:00:00</td>
				<td>人工费用</td>
				<td>8888.88</td>
				<td>张三</td>
				<td>XXXXXXXXXXXXXXXXXX</td>
				<td>
					<i class="ace-icon fa fa-pencil-square-o"></i>
				</td>
			</tr>
			<tr>
				<td class="center">
					<label class="pos-rel">
						<input type="checkbox" class="ace" />
						<span class="lbl"></span>
					</label>
				</td>
				<td class="center">
					<i class="ace-icon fa fa-trash-o"></i>
				</td>
				<td>Z-201611229999</td>
				<td>2016-11-11 22:00:00</td>
				<td>人工费用</td>
				<td>8888.88</td>
				<td>张三</td>
				<td>无</td>
				<td>
					<i class="ace-icon fa fa-pencil-square-o"></i>
				</td>
			</tr>
			<tr>
				<td class="center">
					<label class="pos-rel">
						<input type="checkbox" class="ace" />
						<span class="lbl"></span>
					</label>
				</td>
				<td class="center">
					<i class="ace-icon fa fa-trash-o"></i>
				</td>
				<td>Z-201611229999</td>
				<td>2016-11-11 22:00:00</td>
				<td>人工费用</td>
				<td>8888.88</td>
				<td>张三</td>
				<td>无</td>
				<td>
					<i class="ace-icon fa fa-pencil-square-o"></i>
				</td>
			</tr>
			<tr>
				<td class="center">
					<label class="pos-rel">
						<input type="checkbox" class="ace" />
						<span class="lbl"></span>
					</label>
				</td>
				<td class="center">
					<i class="ace-icon fa fa-trash-o"></i>
				</td>
				<td>Z-201611229999</td>
				<td>2016-11-11 22:00:00</td>
				<td>人工费用</td>
				<td>8888.88</td>
				<td>张三</td>
				<td>无</td>
				<td>
					<i class="ace-icon fa fa-pencil-square-o"></i>
				</td>
			</tr>
			<tr>
				<td class="center">
					<label class="pos-rel">
						<input type="checkbox" class="ace" />
						<span class="lbl"></span>
					</label>
				</td>
				<td class="center">
					<i class="ace-icon fa fa-trash-o"></i>
				</td>
				<td>Z-201611229999</td>
				<td>2016-11-11 22:00:00</td>
				<td>人工费用</td>
				<td>8888.88</td>
				<td>张三</td>
				<td>无</td>
				<td>
					<i class="ace-icon fa fa-pencil-square-o"></i>
				</td>
			</tr>
			<tr>
				<td class="center">
					<label class="pos-rel">
						<input type="checkbox" class="ace" />
						<span class="lbl"></span>
					</label>
				</td>
				<td class="center">
					<i class="ace-icon fa fa-trash-o"></i>
				</td>
				<td>Z-201611229999</td>
				<td>2016-11-11 22:00:00</td>
				<td>人工费用</td>
				<td>8888.88</td>
				<td>张三</td>
				<td>无</td>
				<td>
					<i class="ace-icon fa fa-pencil-square-o"></i>
				</td>
			</tr>
		</tbody>
	</table>
	<div id="footer-fenye-footer">
		<p class="foot-foot">
			<span>共三条，每页显示</span>
			<select class="select">
				<option>1</option>
				<option>2</option>
				<option>3</option>
				<option>4</option>
				<option>5</option>
				<option>6</option>
				<option>7</option>
				<option>8</option>
				<option>9</option>
				<option selected="selected">10</option>
			</select>
			<span>条</span>
		</p>
		<ul class="pagination pull-right no-margin">
			<li class="prev disabled"><a href="#"><i class="ace-icon fa fa-angle-left"></i></a></li>
			<li class="active"><a href="#" class="active-bg">1</a></li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a></li>
			<li><a href="#">...</a></li>
			<li><a href="#">10</a></li>
			<li class="next"><a href="#"><i class="ace-icon fa fa-angle-right"></i></a></li>
		</ul>
	</div>
</div>
<!-- end -->

<!-- inline scripts related to this page -->
<script src="assets/js/bootstrap-datepicker.min.js"></script>		
<script type="text/javascript">
	jQuery(function($) {

		//筛选
		var Btn = $(".btn-filter"),
			next = $(".saixuan"),
			btnS = $(".buttonss");

		Btn.on("click", function() {
			next.slideDown(200);
		});
		btnS.on("click", function() {
			next.slideUp(200);
		});

		//日期
		$('.date-picker').datepicker({
			autoclose: true,
			todayHighlight: true
		});

		$('.simple-table').on('click', 'td :checkbox', function() {
			var $row = $(this).closest('tr');
			if(this.checked) $row.addClass('active');
			else $row.removeClass('active');
		}).on('click','th:eq(0) :checkbox', function(){
			var checkall = this.checked;
			$(this).closest('table').find('tbody :checkbox').each(function(){
				this.checked = checkall;
				var $row = $(this).closest('tr');
				if(this.checked) $row.addClass('active');
				else $row.removeClass('active');
			});
		});

	})
</script>